<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden
		}
		#app{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 200px;
			height: 200px;
			background-color: pink;
			text-align: center;
			line-height: 30px;
		}
	</style>
</head>
<body>
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
<div id="root">
	<div id="app" v-drag>
		{{drag}}
	</div>
</div>
<script>
	Vue.directive('drag',{
		bind : function(el){
			// console.log(this.el.parentNode.parentNode.parentNode.parentNode.parentNode===document);//false null
			let oDiv = this.el;
			let doc = this.getDocumentNode(oDiv);
			let docH = doc.clientHeight;
			let docW = doc.clientWidth;
			document.onselectstart = function(){
			  	return false;
			  }
			oDiv.onmousedown = function(e){
				let sl = e.clientX - oDiv.offsetLeft;
				let st = e.clientY - oDiv.offsetTop;
				document.onmousemove = function(e){
					let nl = e.clientX - sl;
					let nt = e.clientY - st
					nl = Math.max(nl,0);
					nt = Math.max(nt,0);
					nl = Math.min(nl,docW-oDiv.offsetWidth);
					nt = Math.min(nt,docH-oDiv.offsetHeight);
					oDiv.style.left = nl + 'px';
					oDiv.style.top = nt + "px";
				} 
				oDiv.onmouseup = function(){
					document.onmousemove = null;
					oDiv.onmouseup= null;
				}
			}
			
		},
		getDocumentNode : function(el){//获取document元素
			let documentNode = null;
			while(el!==document){
				documentNode = el;
				el = el.parentNode;
			}
			return documentNode;
		}
	
	});
	var vm = new Vue({
		el : '#root',
		data : {
			drag : '拖拽'
		},
		methods : {

		}
	})
</script>	
</body>
</html>